<template>
  <div class="home">
      <!-- 使用elementui 去官网复制  使用前要配置main.js -->
    <!-- <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 导航栏 -->
        
        <div style="background:linear-gradient(135deg,#4c67ff,#5635df);height:60px;"> 
          <img src="../video/logo.be8bbddf.png" alt="" style="width:80%;position:absolute;top:10px;left:10px">
        </div>

<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
 @open="handleOpen" @close="handleClose" :collapse="isCollapse" :router="true">
  
  <el-menu-item index="2">
    <i class="iconfont icon-icon4" style="font-size:40px;margin-right:10px;color:burlywood"></i>
    <span slot="title">管理首页</span>
  </el-menu-item>
  <el-submenu index="1">
    <template slot="title">
      <i class="iconfont icon-xueyuanguanli" style="font-size:40px;margin-right:10px;color:deeppink"></i>
      <span slot="title">学员管理</span>
    </template>
    <el-menu-item-group>
      <span slot="title">学员项目管理</span>
      <!-- <el-menu-item index="1-1">选项1</el-menu-item> -->
     
    </el-menu-item-group>
    <!-- <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu> -->
  </el-submenu>

  <el-menu-item index="4">
    <i class="iconfont icon-wode" style="font-size:40px;margin-right:10px;color:blue"></i>
    <span slot="title">我的中心</span>
  </el-menu-item>
</el-menu>
      </el-aside>
    <el-container>
      <!-- 顶栏 -->
      <el-header style="background:#5635df">
        <el-row type="flex" class="row-bg" justify="space-between">
          <!-- 顶栏分三部分 -->
          <el-col :span="6"><div class="grid-content bg-purple">
            <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
              <el-radio-button :label="false">展开</el-radio-button>
              <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group> -->
            <i :class="[isCollapse?'iconfont icon-shouqi':'iconfont icon-zhankai']" 
            style="font-size:40px;color:hotpink" @click="isCollapse= !isCollapse"> </i>
        </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light" style="color:#fff">千峰管理系统</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">
             <el-avatar :size="size" :src="circleUrl" class="pic" style="vertical-align:middle"></el-avatar>
            欢迎您：
            <a href="" style="color:#fff">{{userInfo.nickname}}</a>  
            <a href="" style="color:red;margin-left:10px" @click="quit">退出</a></div></el-col>
        </el-row>
      </el-header>
      <!-- 展示区 -->

      <el-main>
        <!-- <div style="overflow:hidden">
          <div class="fp">首页 ></div> 
          <div class="mf">管理首页</div>
        </div> -->
        <router-view></router-view>
      </el-main>
    </el-container>
    </el-container>
  </div>
</template>

<style scope>
html{
  color:
}

 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
<script>
import {mapState} from "vuex"
  export default {
    data() {
      return {
        
        isCollapse: true,
        size:40,
        circleUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1562279744,2925257402&fm=26&gp=0.jpg"
      };
    },
    computed: {
      ...mapState("user",['userInfo'])
    },
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      quit(){
        // localStorage.removeItem("myToken")
        // localStorage.removeItem("userInfo")
        // this.$router.push("/")
      }
    }
  }
</script>
